<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>position</title>
    <link rel="shortcut icon" type="image/x-icon" href="/bigyi/icon.png">
    <style>
    strong{color:red;
        text-decoration: underline;}
    .bbody {
        width: 200px;
        height: 200px;
        background-color: #eee;
        position: relative;
    }
    
    .body1 {
        width: 100px;
        height: 100px;
        background-color: green;
        opacity: 0.5;
        position: relative;
        float: left;
    }
    /*已经定位元素*/
    
    .body2 {
        width: 100px;
        height: 100px;
        background-color: green;
        opacity: 0.5;
        float: left;
    }
    /*未定位元素*/
    
    .sbody1 {
        width: 50px;
        height: 50px;
        background-color: red;
        opacity: 0.9;
        position: absolute;
        top: 50px;
        display: block;
        float: left;
    }
    /*绝对定位小元素*/
    
    .sbody2 {
        width: 50px;
        height: 50px;
        background-color: red;
        opacity: 0.9;
        position: absolute;
        top: 50px;
        display: block;
    }
    /*相对定位小元素*/
    </style>
</head>

<body>
    <p>position中绝对定位<strong>absolute</strong>的用法</p>
    <p>相对定位是“相对于”元素在文档中的初始位置，而<strong>绝对定位</strong>是“相对于”最近的<strong>已定位祖先元素</strong>，如果不存在已定位的祖先元素，那么“相对于”最初的包含块。</p>
    <div class="bbody">
        <div class="body1">
            <div class="sbody1">1</div>
        </div>
        <div class="body1">
            <div class="sbody1">2</div>
        </div>
        <div class="body1">
            <div class="sbody1">3</div>
        </div>
    </div>
    <div class="bbody">
        <div class="body2">
            <div class="sbody2">1</div>
        </div>
        <div class="body2">
            <div class="sbody2">2</div>
        </div>
        <div class="body2">
            <div class="sbody2">3</div>
        </div>
    </div>
    </div>
    <p>上面结构是灰色大方框，3个绿色方框为body1，<strong>position：relative，</strong> 红色笑方框为sbody1 <strong>position：absolute。</strong></p>
    <p>上面结构是灰色大方框，3个绿色方框为body2，<strong>position未设置</strong> 红色笑方框为sbody2 <strong>position：absolute。</strong></p>
    <p>结果是因为下面红方框的父元素（绿色方框）没有设置位置（position）所以红方框的absolute就是以灰色方框位置确定 结果红1和红3重合了</p>
    <p>注：上面绿色方框和红色方框都是float: left;</p>
</body>

</html>
